<header class="site-header">

    <!-- Logo and title -->
	<div class="branding">
		<a href="{{ site.baseurl }}/">
			<img class="avatar" src="{{ site.baseurl }}/{{ site.theme_settings.avatar }}" alt=""/>
		</a>

		<h1 class="site-title">
			<a href="{{ site.baseurl }}/">{{ site.theme_settings.title }}</a>
		</h1>
	</div>

    <!-- Toggle menu -->
    <nav class="clear">
    <a id="pull" class="toggle" href="#">
    <i class="fa fa-bars fa-lg"></i>
    </a>

    <!-- Menu -->
    <ul>
        {% for page in site.pages %}
        {% if page.title and page.hide != true %}
        <li class="separator">
            |
        </li>
        <li>
            <a class="clear" href="{{ page.url | relative_url }}">
                {{ page.title }}
            </a>
        </li>
        {% endif %}
        {% endfor %}
        {% if site.theme_settings.portfolio %}
        <li class="separator">
            |
        </li>
        <li>
            <a class="clear" href="{{ site.baseurl }}/portfolio">
                Portfolio
            </a>
        </li>
        {% endif %}
				{% if site.theme_settings.gobang %}
				<li class="separator">
						|
				</li>
				<li>
						<a class="clear" href="{{ site.baseurl }}/gobang">
								Gobang
						</a>
				</li>
				{% endif %}
        {% if site.theme_settings.search %}
        <li class="separator">
            |
        </li>
        <li>
            <a class="clear" href="{{ site.baseurl }}/search">
                <i class="fa fa-search" aria-hidden="true"></i>
            </a>
        </li>
        {% endif %}
        {% if site.theme_settings.tags %}
        <li class="separator">
            |
        </li>
        <li>
            <a class="clear" href="{{ site.baseurl }}/tags">
                <i class="fa fa-tags" aria-hidden="true"></i>
            </a>
        </li>
        {% endif %}

    </ul>

	</nav>
</header>
